<template>
  <div>
    <div id="slider" class="mui-slider">
      <div
        id="sliderSegmentedControl"
        class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted"
      >
        <div class="mui-scroll">
          <a
            :class="['mui-control-item',item.id==0?'mui-active':'']"
            data-wid="tab-top-subpage-2.html"
            v-for="item in list"
            :key="item.id"
            @click="getImages(item.id)"
          >{{item.title}}</a>
        </div>
      </div>
    </div>
    <ul class="photo-list">
      <router-link v-for="img in imgs" :key="img.id" tag="li" :to="'/home/photosinfo/'+img.id">
        <img v-lazy="img.img_url" />
        <div class="info">
          <h1 class="info-title">{{img.title}}</h1>
          <div class="info-body">{{img.zhaiyao}}</div>
        </div>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      imgs:[],
      listId:0
    };
  },
  created() {
    this.getlist();
    this.getImages();
  },
  methods: {
    getlist() {
      this.$axios({
        method: "get",
        url: "http://www.liulongbin.top:3005/api/getimgcategory"
      })
        .then(response => {
          if (response.data.status == 0) {
            this.list = response.data.message;
            this.list.unshift({ title: "全部", id: 0 });
          } else {
            this.showToastTime("数据请求错误");
          }
        })
        .catch(err => {
          if (err) {
            this.showToastTime("获取请求失败");
          }
        });
    },
    showToastTime(msg) {
      const toast = this.$createToast({
        time: 1000,
        txt: msg
      });
      toast.show();
    },
    getImages(id){
      console.log(111);
      if(id==undefined){
        this.listId=0;
      }else{
        this.listId = id;
      }
      this.$axios({
        method:"get",
        url:"http://www.liulongbin.top:3005/api/getimages/"+this.listId
      })
      .then(response=>{
        // console.log(response);
        if(response.data.status==0){
          this.imgs = response.data.message;
        }else{
          this.showToastTime("数据获取失败");
        }
      })
      .catch(err=>{
        if(err){
          this.showToastTime("数据请求失败");
        }
      })
    }
  }
};
</script>

<style lang="less">
.photo-list{
  li{
    width: 100%;
    position: relative;
    // background-color: #ccc;
    text-align: center;
    img[lazy="loading"]{
      width: 40px;
      height: 300px;
      margin: auto;
    }
    img{
      width: 100%!important;
    }
  }
}

.info{
  color:white;
  font-size: 14px;
  position: absolute;
  text-align: left;
  background-color:ragb(0,0,0,0.4)!important;
  bottom: 0;
  .info-title{

  }
  .info-body{

  }
}
</style>